<template>
    <div class="container">
        <el-card>
            <h3 slot="header">收银台</h3>
            <section class="account-box">
                <el-row :gutter="20">
                    <el-form label-width="120px">
                        <el-form-item label="订单编号：" prop="name">
                            {{orderId}}
                        </el-form-item>
                        <el-form-item label="收货人名称：" prop="name">
                            {{receiverName}}
                        </el-form-item>
                        <el-form-item label="联系方式：" prop="name">
                            {{receiverPhone}}
                        </el-form-item>
                        <el-form-item label="收货地址：" prop="name">
                            {{receiverDetailAddress}}
                        </el-form-item>
                        <span class="account-box__right">
                            <el-form-item label="应付金额为：" prop="name">
                                {{product_total}}元
                            </el-form-item>
                        </span>
                    </el-form>
                </el-row>
            </section>
        </el-card>
        <el-card>
            <el-tabs type="card" @tab-click="handleCardTableClick">
                <el-tab-pane>
                    <span slot="label"><i class="el-icon-bank-card"></i> 微信支付</span>
                    <el-card >
                        <h3 slot="header">请使用微信扫一扫，扫下方二维码</h3>
                        <img :src="imageQR">
                    </el-card>
                </el-tab-pane>
                <el-tab-pane label="支付宝支付">
                    <el-card>
                        <h3 slot="header">支付宝支付</h3>
                    </el-card>
                </el-tab-pane>
                <el-tab-pane>
                    <span slot="label"><i class="el-icon-bank-card"></i> 银行卡支付</span>
                    <el-card>
                        <h3 slot="header">银行卡支付</h3>
                    </el-card>
                </el-tab-pane>
            </el-tabs>
        </el-card>
    </div>
</template>

<script>
  import { doCreateQRImage } from '@/apis/order';

  export default {
    name: 'Counter',
    data() {
      return {
        activeName: 'first',
        imageQR: null,
        product_total: null,
        orderId: null,
        receiverName: null,
        receiverPhone: null,
        receiverDetailAddress: null
      };
    },
    mounted() {
      this.getUrlParams();
      this.weChatTableClick(this.orderId);
    },
    methods: {
      weChatTableClick(productId) {
          debugger;
        doCreateQRImage(productId).then(res => {
          this.imageQR = 'data:image/png;base64,' + res.data;
        });
        this.$notify({
          title: '微信支付',
          message: this.imageQR,
          duration: 3000
        });
      },
      handleCardTableClick(tab, event) {
        console.log(tab, event);
        if (tab.index === '0') {
          this.weChatTableClick(this.orderId);
        } else if (tab.index === '1') {

        } else if (tab.index === '2') {

        }
      },
      alipayTableClick(productId) {
        this.$notify({
          title: '支付宝支付',
          message: '支付宝支付',
          duration: 3000
        });
      },
      getUrlParams() {
        // 取到路由带过来的参数
        const orderInfo = this.$route.query;
        debugger;
        this.product_total = orderInfo.pay_total;
        this.orderId = orderInfo.id;
        this.receiverName = orderInfo.receiverName;
        this.receiverPhone = orderInfo.receiverPhone;
        this.receiverDetailAddress = orderInfo.receiverDetailAddress;
        console.log(this.$route.query);
      }
    }
  };
</script>

<style>

</style>
